<template>
    <div class="text-center">
        <div class="text-lg mb-2">注册账号</div>
        <div class="mb-4">请输入用户名密码用以注册账号</div>
        <div class="max-w-[450px] w-4/5 mx-auto">
            <a-input-group compact>
                <a-select class=" !mb-2" size="large" v-model:value="info.area" style="width: 30%">
                    <a-select-option :value="86">+86</a-select-option>
                    <a-select-option :value="852">+852</a-select-option>
                    <a-select-option :value="65">+65</a-select-option>
                </a-select>
                <a-input size="large" v-model:value.trim="info.phone" style="width: 70%" />
            </a-input-group>
            <a-input-search class=" !mb-2" v-model:value.trim="info.verify_code" placeholder="短信验证码" size="large"
                @search="getCode">
                <template #enterButton>
                    <a-button :disabled="smsInfo.allowSend" class="!bg-base !text-white outline-none">
                        {{ !smsInfo.allowSend ? "获取验证码" : `${smsInfo.time}重新获取` }}
                    </a-button>
                </template>
            </a-input-search>
            <a-input class=" !mb-2" size="large" v-model:value.trim="info.name" placeholder="请输入您的昵称" />
            <a-input-password :disabled="allowRegister" class=" !mb-2" size="large" v-model:value.trim="info.password"
                placeholder="请输入您的密码" />
            <a-input-password :disabled="allowRegister" class=" !mb-2" size="large" v-model:value.trim="info.repassword"
                placeholder="请重复您的密码" />
            <a-input class=" !mb-2" size="large" :maxlength="8" v-model:value.trim="info.invite_code"
                placeholder="请输入邀请码(可选)" />
            <button :disabled="allowRegister" @click="submit"
                class="bg-base text-white outline-none !my-6 w-full disabled:bg-bg-purple-100">注册</button>
            <div>已经注册过账号？请<a class="ml-1" @click="emits('setType', 'accout')">登录</a></div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { register, send_reg_verify_code } from '@/request/api';
import { message } from 'ant-design-vue';
const emits = defineEmits(['setType'])
const info = reactive<{ area: number | string, phone: string, password: string, repassword: string, verify_code: string, name: string, invite_code: string }>({
    area: 86,
    phone: '',
    password: '',
    repassword: '',
    verify_code: '',
    name: '',
    invite_code: ''
})
const smsInfo = reactive({
    allowSend: false,
    time: 59
})
let allowRegister = ref<boolean>(false)
const getCode = () => {
    if (!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(info.phone.trim())) {
        message.error('手机号码不正确，请确认后再发送！')
    } else {
        smsInfo.allowSend = true
        send_reg_verify_code({ phone: info.phone }).then(res => {
            if (res.code == 200) {
                message.success('发送成功！')
                const interVal = setInterval(() => {
                    if (smsInfo.time > 0) {
                        smsInfo.time--
                    } else {
                        smsInfo.allowSend = false
                        smsInfo.time = 59
                        clearInterval(interVal)
                    }
                }, 1000)
            } else {
                smsInfo.allowSend = false
            }
        })
    }
}
const submit = () => {
    if (!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(info.phone.trim())) {
        message.error('手机号码格式不正确，请确认后再发送！')
    } else if (/^d{4}$/.test(info.verify_code.trim())) {
        message.error('验证码不正确，请确认后再发送！')
    } else if (!info.name.trim()) {
        message.error('用户名不正确，请确认后再发送！')
    } else if (!info.password.trim()) {
        message.error('密码不能为空！')
    } else if (info.repassword !== info.password) {
        message.error('两次密码输入不一致')
    } else if (info.invite_code && !/^[a-zA-Z0-9]{6,8}$/.test(info.invite_code)) {
        message.error('邀请码格式不正确')
    } else {
        register({ ...info }).then(res => {
            if (res.code == 200) {
                message.success('注册成功！')
                emits('setType', 'accout')
            }
        })
    }
}
</script>